<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 经纪管理 -->
        <!-- 顶部 -->
        <!--         :remote-method="remoteMethod"
                :loading="loading"
                      @change="changevalue"
                    v-for="item in options"
                    :key="item.id"-->
        <Toptoolbar>
          <template #leftbtn>
            <el-button type="primary" @click="visagents=true">添加经纪人</el-button>
          </template>
          <template #search>
            <template>
              <el-select
                v-model="value"
                :remote-method="remoteMethod"
                :loading="loading"
                clearable
                width="500px"
                filterable
                remote

                placeholder="请输入关键字"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </template>
            <el-button icon="el-icon-search" @click="searchbtn" />

          </template></Toptoolbar>

        <!-- 表格组件 -->
        <clientbrokerTable :table-data="tableData" :address="address=true" @delagent="delbtn" @Addagents="addagent" />
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="agentsdata._limit"
            :current-page.sync="currentpage"
            @current-change="currentchange"
          />
        </el-row>

      </el-card>
      <!-- 弹窗 -->
      <addagents ref="addagent" :visagents.sync="visagents" @getAgents="getAgents()" />
    </div>
  </div>
</template>
<script>
import { getAgentslist, getTotal, delAgent } from '@/api/agents'
// 弹窗
import addagents from './component/addagents.vue'
export default {
  components: { addagents },
  data() {
    return {
      tableData: [], // 响应数据
      // 获取经纪人列表参数
      agentsdata: {
        _limit: 2, // 每页的条数
        _start: 0, // 开始获取的位置
        name_contains: ''// 模糊搜索名称
      },
      total: 0, // 经纪人数量
      visagents: false, // 弹窗
      agentsId: 0, // 经纪人/客户id
      address: false, // 子组件地址栏显示
      loading: false, // 搜索加载
      options: {}, // 搜索下拉菜单
      value: '', // 下拉菜单选中项
      currentpage: 1// 页码
    }
  },
  async created() {
    this.getAgents()
  },
  methods: {
    // 获取经纪人列表
    async  getAgents() {
      const current = (this.currentpage - 1) * this.agentsdata._limit
      const res = await getAgentslist({ _start: current, _limit: this.agentsdata._limit })
      this.tableData = res.data
      console.log(58, res)
      // 获取经纪人数量
      const total = await getTotal()
      this.total = total.data
    },

    addagent(id) {
      this.visagents = true
      this.$refs.addagent.getAgentdetail(id)
    },
    // 这里有问题，不能跳转 已解决
    currentchange(val) {
      if (val === 1) {
        this.currentpage = 1
      } else {
        // 当前每一页的总条数为2，但下标为1
        // 点击2，需要获取到下标为2的数据
        // 每页的总条数乘当前的页码-1就是下一页获取的第一条数据
        // 比如，当前是第一页，总条数为2，下标为0，1 总条数乘1
        // 那么第二页的第一条数据就是数组中下标为2的数据
        // 第二页两条，为2，3下标，点击第三页，将将3-1乘2那么第三页的第一条数据就是下标为4的数据
        this.currentpage = val
      }
      this.getAgents()
    },
    delbtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 删除
        await delAgent(id)
        if (this.tableData.length <= 1 && this.currentpage !== 1) {
          this.currentpage--
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 渲染
        this.getAgents()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 模糊搜索下拉菜单
    async  remoteMethod(val) {
      // 如果当前输入的不为空
      if (val !== '') {
        this.loading = true
        // 根据当前输入的用户名获取用户列表
        const res = await getAgentslist({ name_contains: val })
        this.loading = false
        // 在下拉菜单遍历
        this.options = res.data
      }
    },
    // 搜索按钮，点击将搜索到的渲染在页面
    searchbtn() {
      if (this.value !== '') {
        this.tableData = this.options
        this.value = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
}
</style>
